import { Image } from "antd";
import CommonTable from "@/components/CommonTable";
import Style from "../index.module.less";

const GoodsList = ({ tableData, type }) => {
	// type === 1 ? "已分拣" : "未分拣";
	const columns = [
		{
			title: <span className={Style.font18}>商品图片</span>,
			dataIndex: "productImg",
			key: "productImg",
			width: 160,
			render: (value, record) => {
				return <Image style={{ borderRadius: "4px", height: "108px" }} src={value} />;
			}
		},
		{
			title: <span className={Style.font18}>商品信息</span>,
			dataIndex: "info",
			key: "info",
			width: 600,
			render: (_, record) => {
				return (
					<div key={_}>
						{record.productSpec && <p className={Style.row_t1}>{record.productSpec}</p>}
						{record.skuCode && <p className={Style.row_t2}>商品编码：{record.skuCode}</p>}
						{record.productName && <p className={Style.row_t3}>{record.productName}</p>}
					</div>
				);
			}
		},
		{
			title: <span className={Style.font18}>商品唯一码</span>,
			width: 260,
			dataIndex: "uniqueCodes",
			key: "uniqueCodes",
			render: (value, record) => {
				return (
					<div key={value} className={`${Style.row_t2} ${type ? Style.green : ""}`}>
						{value.map(code => (
							<p key={code}>{code}</p>
						))}
					</div>
				);
			}
		}
	];

	const CommonTableProps = {
		data: tableData,
		columns,
		// size: "small",
		rowkey: "uniqueCode"
	};

	return <CommonTable bordered {...CommonTableProps} style={{ marginTop: 16 }} />;
};

const ClassifyDataCard = ({ data }) => {
	return (
		<div className={`${Style.card}`} style={{ flex: 1 }}>
			<span className={Style.font18}>未分拣</span>
			<GoodsList tableData={data?.noSortingTableList || []} />
			<div style={{ height: 16 }}></div>
			<span className={Style.font18}>已分拣</span>
			<GoodsList type={1} tableData={data?.sortingTableList || []} />
		</div>
	);
};
export default ClassifyDataCard;
